<template>
	<view>
		<view class="top-title">
			<text class="num-goods">共3件商品</text>
			<text @click="flag_edit=!flag_edit" class="edit-goods">{{flag_edit?'完成':'编辑' }}</text>
		</view>
		<view class="cell-list" v-for="(item, index) in items" :key="item.value">
			<view class="cell-list-l" v-if="flag_edit" @click="checkitem(index)">
				<!-- <radio :value="item.value" :checked="index === current" /> -->
				<image class="check-pric" v-if="item.checked" :src="$IMG_URL+'/static/images/BIG-icon/rightFill.png'" mode=""></image>
				<text v-else class="check"></text>

			</view>
			<view class="cell-list-content">
				<view class="cell-c-prc">
					<image :src="$IMG_URL+'/static/images/BIG-index/listtestimg.png'" mode=""></image>
				</view>
				<view class="cell-c-text">
					<text class="cell-title">上普牌铁锌氨基酸口服液礼盒装增强免疫力</text>
					<view class="cell-pric">
						￥<text>129.00</text>
					</view>
				</view>
			</view>
		</view>
					<view class="all-check-box" v-if="flag_edit">
						<view class="all-box-l">
							<image @click="allBtn" v-if="flag_all" class="check-pric" v-else :src="$IMG_URL+'/static/images/BIG-icon/rightFill.png'" mode=""></image>
							<text @click="allBtn" v-else class="check"></text>
							
							<text>全选</text>
						</view>
						<view class="all-box-r">
							取消收藏
						</view>
					</view>
					<text style="display: block;text-align: center;font-size: 15px;color: #999;margin-top: 16px;">———— 没有更多了 ————</text>
	</view>

</template>

<script>
	import zxcheckbox from '@/components/zxcheckbox/zxcheckbox.vue'
	export default {
		data() {
			return {
				items: [{
						value: 'USA',
						name: '美国',
						checked: true
					},
					{
						value: 'CHN',
						name: '中国',
						checked: false
					},
					{
						value: 'BRA',
						name: '巴西',
						checked: false
					}
				],
				flag_edit:false
			};
		},
		computed: {
			// 是否为大字版
			flag_big() {
				return this.$store.state.user.isBIG
			},
			flag_all(){
				return this.items.every(i=>i.checked === true)
			}
		},
		methods:{
			checkitem(i){
				this.items[i].checked = !this.items[i].checked
				console.log(this.items);
			},
			allBtn(){
				if(this.flag_all) {
					this.items.forEach(it=>{
						it.checked = false
					})
				} else {
					this.items.forEach(it=>{
						it.checked = true
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: rgb(242, 242, 242);
	}

	.top-title {
		display: flex;
		justify-content: space-between;
		padding: 10px 17px;
		box-sizing: border-box;

		.num-goods {
			font-size: 15px;
			color: #999;
		}

		.edit-goods {
			font-size: 18px;
			color: #333;
		}
	}
	.cell-list {
		background-color: #fff;
		padding: 15px 8px;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		.check-pric {
			width: 21px;
			height: 21px;
			margin-right: 6px;
		}
		.check {
			display: block;
			width: 21px;
			height: 21px;
			border-radius: 50%;
			margin-right: 6px;
			border: 1px solid #bfbfbf;
		}
		.cell-list-content {
			display: flex;
			.cell-c-prc {
				width: 96px;
				height: 96px;
				border-radius:10px ;
				margin-right: 16px;
				image {
					width: 100%;
					height: 100%;
				}
			}
			.cell-c-text {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				.cell-title {
					font-size: 20px;
					color: #000;
					overflow : hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}
				.cell-pric {
					color: #ff0000;
					font-size: 18px;
					text {
						font-size: 24px;
					}
				}
			}
		}
	}
	.all-check-box {
		display: flex;
		justify-content: space-between;
		padding: 6px 11px;
		box-sizing: border-box;
		align-items: center;
		position: fixed;
		bottom: 0;
		width: 100%;
		background-color: #fff;
		.all-box-l {
			display: flex;
			align-items: center;
			font-size: 15px;
			color: #999;
			.check {
				display: block;
				width: 21px;
				height: 21px;
				border-radius: 50%;
				margin-right: 6px;
				border: 1px solid #bfbfbf;
			}
			.check-pric {
				width: 21px;
				height: 21px;
				margin-right: 6px;
			}
		}
		.all-box-r {
			padding: 0 32px;
			font-size: 18px;
			color: #fff;
			background-image: linear-gradient(90deg, 
					#ff8300 0%, 
					#ff3d00 100%), 
				linear-gradient(
					#ff8300, 
					#ff8300);
				background-blend-mode: normal, 
					normal;
				height: 38px;
				border-radius: 19px;
				line-height: 38px;
		}
	}
</style>